.header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999;
  background-color: #fff;
  transition: all .2s;

  .content {
    max-width: 1200px;
    min-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: 64px;

    .title {
      color: rgba(0, 0, 0, 88%);
      font-size: 18px;
      font-weight: 700;
    }

    .userInfo {
      margin-left: @padding-base;
      .userAuthBtn{
        display: flex;
        gap: @padding-middle;
        .notice{
          cursor: pointer;
          position: relative;
          font-size: 24px;
          color: #8a919f;
        }
      }
    }


    .btn {
      margin-left: @padding-base;
    }

    .search {
      width: 280px;
      margin-left: auto;
      :global(.ant-input:focus ){
        z-index: 0;
      }
    }

    .navList {
      .navItem {
        cursor: pointer;
        &:hover{
          color:@primary-color ;
        }
        &.active{
          color:@primary-color ;
        }
      }
    }
  }

}

.showHeader {
  transform: translateZ(0);
}

.hiddenHeader {
  transform: translate3d(0, -100%, 0);
}